<template>
  <div><search-control :searh-bar="searhBar" @search="search" />
    <el-card style="margin: 20px">
      <el-button type="success" class="addbtn" round @click="isShowDialog=true">新增货品类型</el-button>
      <el-table
        :data="list"
        border
        stripe
        style="width: 70vw"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
          align="center"
        />
        <el-table-column
          prop="code"
          label="货品类型编号"
          width="290"
          align="center"
        />
        <el-table-column
          prop="name"
          label="货品类型名称"
          width="290"
          align="center"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="290"
          align="center"
        />
        <el-table-column label="操作" fixed="right" width="200" align="center">
          <template>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block" align="center">
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <add-goodstype :is-show-dialog="isShowDialog" />
  </div>
</template>
<script>
import SearchControl from '@/components/SearchControl'
import AddGoodstype from './components/add-goodstype.vue'
import { getGoodsType } from '@/api/goodstype'

export default {
  components: { SearchControl, AddGoodstype },
  data() {
    return {
      searhBar: [
        { type: 'input', name: '类型编号', value: '' },
        { type: 'input', name: '类型名称', value: '' }
      ],

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      isShowDialog: false,

      list: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getGoodsType()
    console.log(res)
    this.list = res.data.data.records
    console.log(this.list)
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    search() {

    },

    // 重置
    resetvalue() {
      this.searhBar.forEach(item => {
        item.value = ''
      })
    }
  },

  provide() {
    return {
      searhBar: this.searhBar,
      changevalue: this.changevalue,
      resetvalue: this.resetvalue
    }
  }
}

</script>

<style scoped lang="scss">
.addbtn{
  margin: 5px 0 20px 20px;
}

.block{
  margin: 20px 0;
}

</style>
